<template>
  <div class="op-container">
    <k-button v-if="authorityHandle(51)" class="top-btn" value="添加抽奖箱" @click.native="addBoxDialog" />
    <!--表格相关 -->
    <el-table
      :data="gradeBoxList"
      fit
      border
      highlight-current-row
      style="width: 100%;border-radius:8px;"
      :header-cell-style="{background:'#F6F5FA',color:'#4E4F62'}"
    >
      <el-table-column type="index" label="序号" width="60px" align="center" />
      <el-table-column prop="boxName" min-width="100px" label="箱子名称" align="center" show-overflow-tooltip />
      <el-table-column prop="price" min-width="80px" label="抽奖积分" align="center" show-overflow-tooltip />
      <el-table-column prop="rebate" min-width="80px" label="箱子折扣" align="center" show-overflow-tooltip />
      <el-table-column prop="boxPrice" min-width="100px" label="对应箱价" align="center">
        <template slot-scope="scope">
          {{ (scope.row.price / coinModel).toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column min-width="200px" label="状态" align="center">
        <template slot-scope="scope">
          <el-switch
            :disabled="!authorityHandle(51)"
            v-model="scope.row.boxStatus"
            active-color="#3b425d"
            inactive-color="#E9EBF2"
            active-text="开启"
            inactive-text="关闭"
            :active-value="1"
            :inactive-value="2"
            @change="boxOnlineState($event,scope)"
          />
        </template>
      </el-table-column>
      <el-table-column min-width="200px" label="操作" align="center">
        <template slot-scope="scope">
          <div class="op-div">
            <k-button v-if="authorityHandle(51)" class="table-btn" value="修改" @click.native="addBoxUpdateDialog(scope.row)" />
            <k-button class="table-btn" value="配置礼品" @click.native="configBabyLib(scope.row)" />
            <k-button v-if="authorityHandle(51)" class="table-btn" value="删除" @click.native="deleteBox(scope.row.id)" />
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="loadData"
    />
    <!-- 添加箱子 弹窗 -->
    <k-dialog
      :show-hide.sync="addBox.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      :title="textMap[dialogStatus]"
      class="addBox-dialog"
      :show-foot="false"
      :two-btn="true"
      @click="saveBoxData"
    >
      <el-form :model="addBoxInfo" label-width="auto" class="form-modify">
        <span v-show="coinModel === 0 || coinModel === undefined || coinModel === null" style="color:red;">积分比例设置不正确,无法计算对应箱价</span>
        <el-form-item label="箱子名称：">
          <el-input v-model="addBoxInfo.boxName" show-word-limit placeholder="请输入箱子名称" />
        </el-form-item>
        <el-form-item label="抽奖积分：">
          <el-input v-model="addBoxInfo.price" type="number" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="箱子折扣：">
          <div style="display:flex;">
            <el-input v-model="addBoxInfo.rebate" type="number" placeholder="请输入" />%
          </div>
        </el-form-item>
        <el-form-item label="对应箱价：">
          <el-input v-model="boxPrice" disabled />
        </el-form-item>
      </el-form>
    </k-dialog>
  </div>
</template>

<script>
import { getPointCurry, listBoxData, saveBoxData, updateBoxData, deleteBoxData, updateBoxStatus } from '@/api/task/index'
import Pagination from '@/components/Pagination'

export default {
  components: { Pagination },
  data() {
    return {
      coinModel: 0,
      totalRows: 0, // 分页组件--数据总条数
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: '',
          start: ''
        },
        sort: '', // 排序字段 为对应列名,
        direction: '' // 排序 正向(asc)逆向(desc),
      },
      dialogStatus: 'create',
      textMap: {
        update: '修改箱子',
        create: '创建箱子'
      },
      addBoxInfo: {
        id: '',
        boxName: '',
        price: 0,
        rebate: 100,
        boxStatus: ''
      },
      addBox: {
        showHide: false
      },
      gradeBoxList: []
    }
  },
  computed: {
    boxPrice: function() {
      return (this.addBoxInfo.price / this.coinModel).toFixed(2)
    }
  },
  created() {
    this.loadData()
    this.getPointCurry()
  },
  methods: {
    getPointCurry() {
      getPointCurry().then(res => {
        this.coinModel = res.data
      })
    },
    // 等级箱子列表页加载数据
    loadData() {
      listBoxData(this.listQuery).then(res => {
        this.totalRows = res.data.totalRows
        this.gradeBoxList = res.data.rows
      })
    },
    addBoxDialog() {
      this.dialogStatus = 'create'
      this.addBox.showHide = true
      this.addBoxInfo = {
        id: '',
        boxName: '',
        price: 0,
        rebate: 100,
        boxStatus: ''
      }
    },
    addBoxUpdateDialog(row) {
      this.dialogStatus = 'update'
      this.$resetForm(this.addBoxInfo)
      this.addBox.showHide = true
      this.addBoxInfo.id = row.id
      this.addBoxInfo.boxName = row.boxName
      this.addBoxInfo.price = row.price
      this.addBoxInfo.rebate = row.rebate
    },
    deleteBox(boxid) {
      this.$confirm('确定要删除该箱子么？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteBoxData({ 'id': boxid }).then(res => {
          if (res.data.success) {
            this.$message.success('操作成功')
            this.loadData()
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }).catch(() => {

      })
    },
    // 箱子上架
    boxOnlineState(event, scope) {
      const id = scope.row.id
      updateBoxStatus({ 'id': id }).then(res => {
        if (!res.data.success) {
          this.$message.error(res.data.msg)
          scope.row.boxStatus = scope.row.boxStatus === 1 ? 2 : 1
        } else {
          this.loadData()
        }
      })
    },
    // 跳转配置饰品
    configBabyLib(row) {
      // this.$router.push({ path: '/rootplayrules/config-babylibnew', query: { id: boxid }})
      this.$router.push({ path: '/taskwall/config-gift', query: { id: row.id, price: row.price, rebate: row.rebate, coinModel: this.coinModel }})
    },

    // 添加|修改等级箱子
    saveBoxData() {
      this.$log(this.addBoxInfo)
      if (this.dialogStatus === 'create') {
        saveBoxData(this.addBoxInfo).then(res => {
          if (res.data.success) {
            this.$message.success('操作成功')
            this.$resetForm(this.addBoxInfo)
            this.loadData()
          } else {
            this.$message.error(res.data.msg)
          }
        })
      } else {
        updateBoxData(this.addBoxInfo).then(res => {
          if (res.data.success) {
            this.$message.success('修改成功')
            this.$resetForm(this.addBoxInfo)
            this.loadData()
          } else {
            this.$message.success(res.data.msg)
          }
        })
      }
      this.addBox.showHide = false
    }
  }
}
</script>
<style>
.sortable-ghost{
  opacity: .8;
  color: #fff!important;
  background: #3b425d!important;
}
</style>
<style lang="scss" scoped>
$mainColor:#3b425d;// 主色调
$disabledColor: #909399; //禁用色
$hoverColor:#1D143C;// 鼠标停留主色调浅色

.op-container{
  margin: 20px;
}
.top-btn{
  margin: 10px 0px 30px 0px;
  font-size: 14px;
  color: #ffffff;
  &:nth-of-type(2){
    margin-left: 10px;
  }
}
.top-right-btn{
  position: absolute;
  right: 20px;
  top: 30px;
  ::v-deep .el-button{
    background-color: #F8F7FB;
    border-color: transparent;
    color: #14162E;
    &:hover{
      color: #ffffff;
      background-color: $mainColor;
    }
    &:active{
      color: #14162E;
    }
  }
}
::v-deep .el-select .el-input.is-focus .el-input__inner {
    border-color: $mainColor;
}
::v-deep .el-input__inner:focus {
    border-color: $mainColor;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.price-input{
  width: 70px;
}
.addBox-dialog{
  ::v-deep .el-dialog__body{
    padding: 10px 80px;
  }

 ::v-deep .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    color: #909399;
    font-size: 40px;
  }
}
.upload-btn {
  font-size: 14px;
  color: #ffffff;
}
.editer {
  border-radius: 8px;
  float: left;
  box-sizing: border-box;
  color: #606266;
  ::v-deep .ql-container {
    height: 440px;
    border-radius: 0px 0px 8px 8px;
  }
  ::v-deep .ql-toolbar.ql-snow {
    border-radius: 8px 8px 0px 0px;
  }
}

.dialog-warningSetting{
  ::v-deep.el-input{
    width: 110px;
  }
  .price-input{
    width: 100px;
  }
  .el-icon{
    &-circle-plus, &-remove{
      font-size: 22px;
      color:#3b425d;
      margin-left: 10px;

   }
  }
  ul {
    list-style-type:none;
    margin-top: 20px;
    padding:0;
    li{
      margin: 0 0 30px 0px;
      display: flex;
      flex-direction: row;
      align-items: center;
      i{
        color: #D1D5DD;
      }
    }
  }
  .warning-title {
      font-size: 16px;
      color: #14162E;
      &-right{
        font-size: 16px;
        color: #14162E;
        margin-left: 80px;
      }
      &-right2{
        font-size: 16px;
        color: #14162E;
        margin-left: 20px;
      }
    }
}
.table-btn{
  width: 90px;
  height: 35px;
  line-height:35px;
  padding: 0;
  background: #e7ecf8;
  border: 1px solid $mainColor;
  border-radius: 8px;
  font-size: 14px;
  color: $mainColor;
  &:hover{
    background: $mainColor;
    color: #fff;
  }
   &:focus {
     background-color: #e7ecf8;
  }
}

</style>
